import util from '../util';
//require('./index.css');
export default class Cuswipper {
	constructor(props) {
		var defaultConfig = {};
		$.extend(defaultConfig, props);
		this.cuswipper;
		this.props = defaultConfig;
		this._setup();
		//this._bindEvent();
	}
	generateSwipperItem(slide, index) {
		console.log("index>>>"+index)
		var templateId = this.props.templateId;
		var templ = document.getElementById(templateId).innerHTML;
		return util.formatTemplate(slide, templ);
	}
	getSwipperItems(page) {
		var swipperItems = [];
		var reqUrl =  this.props.reqUrl;
		if(!reqUrl){
			throw "reqUrl cann't be undefined!";
			return;
		}
		$.ajax({
			type: 'GET',
			url: reqUrl,
			data: {
				page: page
			},
			dataType: 'json',
			async: false,
			success: function(res) {
				if (res == null || res.length == 0) {
					return swipperItems;
				}
				swipperItems = res;
			},
			error: function() {
			}
		});
		/*
		var swipperItems = [];
		swipperItems[0]={videoUrl:"https://mp4.vjshi.com/2019-04-18/d3ade069a7167f837a1f1319b127cacf.mp4",descr:"test1",img:"https://pic.vjshi.com/2018-12-11/a2c979bf32b6153e35dada582c62b4ae/online/puzzle.jpg?x-oss-process=style/resize_w_720",page:1,current:2};
		swipperItems[1]={videoUrl:"https://mp4.vjshi.com/2019-04-03/5983656f5ce44ae12186c053823f146e.mp4",descr:"test2",img:"https://pic.vjshi.com/2019-06-20/e4c6c84427a943bf45db8847260c5956/online/puzzle.jpg?x-oss-process=style/resize_w_720",page:6,current:5};
		swipperItems[2]={videoUrl:"https://lmp4.vjshi.com/2017-09-20/a45809c1300c824dd4704b158eb09854.mp4",descr:"test3",img:"https://pic.vjshi.com/2019-06-19/006a93c616565f8c65195cb62dd92ea3/online/puzzle.jpg?x-oss-process=style/resize_w_720",page:5,current:6};
		swipperItems[3]={videoUrl:"https://mp4.vjshi.com/2019-01-08/a42dad0cbe1307ac410d4c88db71a559.mp4",descr:"test5",img:"https://pic.vjshi.com/2019-01-22/7b117a3d6de49b6bef5202dd83e63b79/online/puzzle.jpg?x-oss-process=style/resize_w_720",page:4,current:7};
		swipperItems[4]={videoUrl:"https://mp4.vjshi.com/2019-01-08/a42dad0cbe1307ac410d4c88db71a559.mp4",descr:"test5",img:"https://pic.vjshi.com/2018-12-23/01de6bcf921801c0096604d1d6e294de/online/puzzle.jpg?x-oss-process=style/resize_w_720",page:2,current:1};
		swipperItems[5]={videoUrl:"https://mp4.vjshi.com/2019-01-08/a42dad0cbe1307ac410d4c88db71a559.mp4",descr:"test5",img:"https://pic.vjshi.com/2019-04-18/d3ade069a7167f837a1f1319b127cacf/online/puzzle.jpg?x-oss-process=style/resize_w_720",page:3,current:3};
		*/
		return swipperItems;
	}
	_setup() {
		var selector = this.props.selector;
		var page = this.props.page;
		if(!page){
			page = 1;
		}
		if(!this.props.current){
			this.props.current=0;
		}
		//debugger;
		var list = [];
		var activeNow = 0;
		var dataOver = false;
		let that = this;
		list = list.concat(that.getSwipperItems(page));
		if(list==null||list.length==0){//空值处理
			
		}
		this.cuswipper = new Swiper(selector, {
			direction: 'horizontal', // 水平切换选项
			loop: false,
			slidesPerView:1.5,
			spaceBetween:5,
			normalizeSlideIndex:false,
			preventClicksPropagation : true,
			//freeMode: true,
			virtual: {
				slides: list,
				renderSlide: function(slide, index) {
					return that.generateSwipperItem(slide, index);
				}
			},
			// allowSlidePrev:false,
			on: {
				slidePrevTransitionEnd: function() {
					console.log("slidePrev>>>");
					console.log("activeIndex>>>" + this.activeIndex); //切换结束时，告诉我现在是第几个slide
					if (this.activeIndex == activeNow) {
						return;
					}
					activeNow = this.activeIndex;
					/*
					if(current-2<0){//重新取值
						if(page==0){
							return;
						}
						page--;
						var appendSliders =getVideo();
						if(appendSliders&&appendSliders.length>0){
							for(var temIndex in appendSliders){
								this.virtual.prependSlide(appendSliders[temIndex]);
							}
						}
					}*/
				},
				slideNextTransitionEnd: function() {
					console.log("slideNext>>>");
					console.log("activeIndex>>>" + this.activeIndex); //切换结束时，告诉我现在是第几个slide
					//console.log("active id>>>"+this.slides[this.activeIndex].id);//
					//alert("activeNow:"+activeNow+">>>activeIndex:"+this.activeIndex+">>>"+"current:"+current)
					if (this.activeIndex == activeNow) {
						return;
					}
					activeNow = this.activeIndex;
					var temSlider = this.slides[1];
					if (activeNow + 3 > list.length) { //重新取值
						console.log("取下一页>>>"+list.length);
						if (dataOver) {
							return;
						}
						page++;
						var appendSliders = that.getSwipperItems(page);
						if (appendSliders && appendSliders.length > 0) {
							list = list.concat(appendSliders);
							for (var temIndex in appendSliders) {
								this.virtual.appendSlide(appendSliders[temIndex]);
							}
						}else{
							dataOver = true;
						}
					}
				},
				click:function(){
					//activeNow = this.activeIndex;
					//alert(activeNow);
					var clickedItem = this.clickedSlide;
					that.props.eventHandeler(this.activeIndex,clickedItem);
				}
			}
		});
		if (this.props.current > 0) {
			this.cuswipper.slideTo(this.props.current, 0, false);
			console.log("slideTo>>" + this.cuswipper.activeIndex);
		}
	}

}
